<template>
    <div class="rank" >
        <div class="icon">
            <img :src="rank.channel_icon_url" alt="">
        </div>
        <div class="rank-list">
            <div class="item-wrap" >
                <div class="list-wrap">
                    <div class="list">
                        <div class="item-rank" v-for="item in rank.channel_list" :key="item.id" @click="goToDetails(item.id)">
                            <ul>
                                <li v-for="child in item.rank_list" :class="child.rank==1 ? 'first' : 'other'">
                                    <div class="img" v-if="child.rank==1">
                                        <img :src="child.head_img" alt="">
                                    </div>
                                    <div class="info" v-if="child.rank==1">
                                        <h4>{{item.title}}</h4>
                                        <p>
                                            <span>NO.{{child.rank}}</span>
                                            {{child.name}}
                                        </p>
                                    </div>
                                    <div class="info" v-else>
                                        <p><span>{{child.rank}}</span> &nbsp;{{child.name}}</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'ui-rank',
     props:{
        rank:Object,
    },
    data(){
        return {
            
        }
    },
    mounted(){
        
    },
    destroyed(){
       
    },
    methods:{
        goToDetails(id){

            console.log(this.$config.pages)
            location.href = this.$config.pages.rank_details+'?id='+ id;
        }
    }

}
</script>
<style lang="less">
.rank{
    padding:0.4rem 0 0.26rem 0.26rem;
    background-color:#fff;
    .icon{
        width:3.12rem;
        img{
            width:100%;
            display: block;
        }
    }
    .rank-list {
        padding-top:24px;
        margin-bottom:10px;
        .list-wrap {
            overflow: hidden;
        }
        .list {
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling : touch;
            -webkit-user-select: none;
            padding-bottom:40px;
            margin-bottom:-40px;
        }

        .item-rank {
            display: inline-block;
            width: 360px;
            height: 2.85rem;
            margin-right:0.26rem;
            background: #f6f6f6;
            padding:0.4rem 0.26rem;
            vertical-align:middle;
            .first{
                width:100%;
                display: flex;
                display: -webkit-flex;
                flex-direction:row;
                font-size:0.4rem;
                color:#333;
                padding-bottom:0.34rem;
                border-bottom:1px solid #d9d9d9;
                .img{
                    width:1.06rem;
                    height:1.06rem;
                    border-radius: 1.06rem;
                    overflow: hidden;
                    margin-right:0.26rem;
                    img{
                        width:100%;
                        height:100%;
                    }
                }
                h4{
                    font-size:0.42rem;
                    margin-bottom:0.18rem;
                    margin-top: 0.1rem;
                }
                p{  
                    font-size:0.34rem;
                    color:#292929;
                    span{
                        color:#e64a19;
                    }
                }
            }
            .other{
                width:50%;
                float: left;
                vertical-align: middle;
                p{  
                    font-size:0.34rem;
                    color:#292929;
                    padding-top:0.4rem;
                    span{
                        color:#666;
                    }
                }
            }
        }

    }
}

    
</style>


